<template>
  <view class="viewport">
    <view class="form">
      <input 
        class="input"
        type="password" 
        placeholder="请输入旧密码"
        v-model="oldPassword"
      />
      <input
        class="input"
        type="password"
        placeholder="请输入新密码（至少6位）"
        v-model="newPassword"
      />
      <input
        class="input"
        type="password"
        placeholder="请确认新密码"
        v-model="confirmPassword"
      />
      <button class="submit-btn" @tap="handleSubmit">提交修改</button>
    </view>
  </view>
</template>

<script setup >
import { ref } from 'vue';
import { updatePassword } from '../../api/apis'; 


const oldPassword = ref('');
const newPassword = ref('');
const confirmPassword = ref('');


const validateForm = () => {
  if (!oldPassword.value || !newPassword.value || !confirmPassword.value) {
    uni.showToast({ title: '请填写完整信息', icon: 'none' });
    return false;
  }
  if (newPassword.value.length < 6) {
    uni.showToast({ title: '密码至少6位', icon: 'none' });
    return false;
  }
  if (newPassword.value !== confirmPassword.value) {
    uni.showToast({ title: '两次输入密码不一致', icon: 'none' });
    return false;
  }
  return true;
};

const handleSubmit = async () => {
  if (!validateForm()) return;
  
  try {
	//发送请求
	const data={
		oldPassword:oldPassword.value,
		password:newPassword.value,
		rePassword:confirmPassword.value
	}
	const res=await updatePassword(data)
    uni.showToast({ title: '修改成功' });
    setTimeout(() => uni.navigateBack(), 1500);
  } catch (error) {
	 
    uni.showToast({ title: error.msg || '修改失败', icon: 'none' });
  }
};
</script>

<style lang="scss">
.viewport {
  padding: 40rpx;
}

.form {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 16rpx;
}

.input {
  height: 100rpx;
  border-bottom: 1rpx solid #eee;
  font-size: 28rpx;
  margin-bottom: 20rpx;
}

.submit-btn {
  margin-top: 60rpx;
  background-color: #007AFF;
  color: white;
  border-radius: 50rpx;
}
</style>